﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <title>用户位置管理</title>
    <link href="~/Scripts/jquery-easyui/themes/bootstrap/easyui.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-easyui/jquery.min.js"></script>
    <script src="~/Scripts/jquery-easyui/jquery.easyui.min.js"></script>
    <script src="~/Scripts/jquery-easyui/locale/easyui-lang-zh_CN.js"></script>
    <link href="~/Content/themes/icon.css" rel="stylesheet" />
    <script src="~/Content/js/common.js"></script>
    <link href="~/Content/themes/table.css" rel="stylesheet" />
    <style type="text/css">
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
            font-family: "微软雅黑";
        }

        #l-map {
            height: 100%;
            width: 100%;
        } 
      
    </style>
   @* <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=euq2yO1pnMgQsaZA89BPEf51dUlAiHVM"></script>*@
</head>

<body>
    <div id="ui_user_layout" class="easyui-layout" data-options="fit:true,border:false">
        <div data-options="region:'north',split:true,border:true,collapsed:false" title="条件搜索" style="height:80px;">
            <div id="ui_user_search">
                <table class="tableForm" style="width: 99%; height: 100%; background: #F5F5F5;">
                    <tr>
                        <th>
                            用户姓名：
                        </th>
                        <td>
                            <input name="txtUserName" id="txtUserName" class="easyui-validatebox textbox" style="width:120px;height:22px;" />
                        </td>

                        <th>
                            所属角色：
                        </th>
                        <td>
                            <input class="easyui-combobox" id="txtUserRole" name="txtUserRole" style="width:150px;height:22px;" data-options="url:'/User/GetAllRoleInfo',editable:false,valueField:'Id',textField:'RoleName',multiple:true" />
                            <img style="cursor: pointer; vertical-align: middle;" onclick="$('#txtUserRole').combobox('clear');"
                                 alt="清空角色" title="清空角色" src="../Content/themes/icon/edit-clear.png" />
                        </td>
                        <th>
                            所属部门：
                        </th>
                        <td>
                            <input class="easyui-combotree" id="txtUserDept" name="txtUserDept"
                                   data-options="url: '/Department/GetAllDepartmentTree',onlyLeafCheck:true,multiple:true," style="width:150px;height:22px;" />
                            <img style="cursor: pointer; vertical-align: middle;" onclick="$('#txtUserDept').combotree('clear');"
                                 alt="清空部门" title="清空部门" src="../Content/themes/icon/edit-clear.png" />
                        </td>
                  
                 
                        <td >
                            <a href="javascript:void(0);" class="easyui-linkbutton" iconcls="icon-search" plain="true"
                               onclick="searchUser()">搜索</a>                           
                        </td>
                    </tr>
                </table>
            </div>
        </div>
        <div data-options="region:'center',border:false">
            <div id="l-map" ></div> 
        </div>
    </div>
</body>
 
</html>
<script type="text/javascript">
    var userData;
    var strLoc = new Array();
    var city = new Array();
    var realName = new Array();

    function searchUser() {
        $.ajax({
            url: "/GIS/GetAllUserInfo",
            type: "post",
            data: {
                username: $('#txtUserName').val(),
                RoleIDs: $("#txtUserRole").combobox('getValues'),
                DeptIds: $("#txtUserDept").combobox('getValues')
            },
            dataType: "json",
            timeout: 5000,
            success: function (data) {
                map.clearOverlays();//清除图层覆盖物
                userData = data;
                markUser();

            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                if (textStatus == "timeout") {
                    $.show_alert("提示", "请求超时，请刷新当前页重试！");
                }
                else {
                    $.show_alert("错误", textStatus + "：" + errorThrown);
                }
            }

        });

    };
    

    function markUser() {
        
        for (var i = 0; i < userData.rows.length; i++) {
            strLoc[i] = userData.rows[i].province + userData.rows[i].city + userData.rows[i].county;
            city[i] = userData.rows[i].city;
            realName[i] = userData.rows[i].realName;
            if (city[i] == "县" || city[i] == "市辖区") {
                city[i] = userData.rows[i].province;
            }
            markGIS(strLoc[i], city[i], realName[i] + ":" + city[i] + userData.rows[i].describe);
        }
    };
   
    function markGIS(strLoc,city,label) {

        myGeo.getPoint(strLoc, function (point) {
            if (point) {
                // document.getElementById("result").innerHTML += index + "、" + add + ":" + point.lng + "," + point.lat + "</br>";
                var address = new BMap.Point(point.lng, point.lat);
                addMarker(address, new BMap.Label(label, { offset: new BMap.Size(20, -10) }));
            }
        }, city);
    }
    var index = 0;
    var myGeo;
    var map;
    

    // 编写自定义函数,创建标注
    function addMarker(point, label) {
        var marker = new BMap.Marker(point);
        map.addOverlay(marker);
        marker.setLabel(label);
    }

    function Clear() {//清除
        map.clearOverlays();//清除图层覆盖物
       // document.getElementById("keyword").value = "";//清除搜索框结构
    }

    //百度地图API功能
    function loadJScript() {
        var script = document.createElement("script");
        script.type = "text/javascript";
        script.src = "http://api.map.baidu.com/api?v=2.0&ak=euq2yO1pnMgQsaZA89BPEf51dUlAiHVM&callback=init";
        document.body.appendChild(script);
    }
    function init() {
        
         map = new BMap.Map("l-map");
         map.centerAndZoom(new BMap.Point(108.94589, 34.347984), 6);

        map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

        map.addControl(new BMap.NavigationControl());//添加一个平移缩放控件、一个比例尺控件和一个缩略图控件
        map.addControl(new BMap.ScaleControl());
        map.addControl(new BMap.OverviewMapControl());
        map.addControl(new BMap.MapTypeControl());
        myGeo = new BMap.Geocoder();
    }
    window.onload = loadJScript;  //异步加载地图

</script>
